import * as React from "react";

interface Props {
  render: (arg0: State) => {};
}

interface State {
  x: number;
  y: number;
}

export default class Mouse extends React.Component<Props, State> {
  state: State = { x: 0, y: 0 };

  handleMove = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    });
  };

  render() {
    return (
      <div style={{ height: "50vh" }} onMouseMove={this.handleMove.bind(this)}>
        {this.props.render(this.state)}
      </div>
    );
  }
}
